import React, { Component } from 'react'
import Test from './Test'
import Demo from './Demo'
const appRef = React.createRef()
export default class App extends Component {
  render() {
    return (
      <div>
        App
        <hr />
        {/* ref对象和标签绑定,拿到的是标签的真实dom */}
        {/* <input type="text" ref={appRef} /> */}
        {/* Test是类组件 */}
        {/* 注意: appRef和input以及Test都绑定了,则后绑定的会生效,先绑定的会失效(被覆盖了) */}
        {/* ref对象和类组件实例绑定,拿到的是当前组件实例 */}
        {/* <Test ref={appRef}></Test> */}
        {/* Demo是函数组件 */}
        {/* ref对象不能和函数组件实例进行绑定,如果绑定了也什么都拿不到,而且会警告 */}
        <Demo ref={appRef}></Demo>
        <button
          onClick={() => {
            // console.log(appRef.current)
            appRef.current.focus()
          }}
        >
          按钮-点击这个按钮,让Demo组件里面的input标签获得焦点
        </button>
      </div>
    )
  }
}
